<template lang='pug'>
.demo(id='demo')
    cesiumContainer()
        c_layer_ArcGisMap
        cLayer
        c_pop_billboards(:arrda='billboards')
        c_tile_b3dm(:alpha='alpha/100' :aboveH="-150")
        c_heatmap(:pnts='llhs')
        techwall(:arrda="techwalls")
        techlabel(:arrda="techlabels")
    el-slider.right(v-model='alpha' )
    //- tsPanel(style="width:360px;height:100px;left:10px;top:320px")
    //-     template(slot="content") 
    //-         .toDxf(@click="toDxf") 导出dxf
    //- tsPanel(style="width:360px;height:200px;left:10px;top:20px")
    //-     template(#content) 
    //-         svgCircle3(style="left:10px;top:120px")
    //- tsPanel(style="width:900px;height:600px;left:600px;top:20px")
    //-     template(#content) 
    //-         cameras(style="left:10px;top:60px;width:calc(100% - 20px);height:calc(100% - 80px)")
    //- tsPanel(style="width:560px;height:400px;left:10px;top:520px")
    //-     template(#content) 
    //-         approvalCircle(style="left:10px;top:60px")
</template>

<script>
let Cesium = require('cesium/Cesium');
import cameras from '../components/jianyang/camerapick.vue'
import approvalCircle from '../components/jianyang/approvalCircle.vue'
import svgShape from '../components/svgShape/svgShape.vue'
import svgCircle3 from '../components/svgShape/svgCircle3.vue'
import tsPanel from '../components/techStyle/tsPanelCorn.vue'
import cesiumContainer from '../components/vcesium/viewer/cesiumContainer.vue'
import cLayer from '../components/vcesium/imageryLayers/cLayer.vue'
import c_pop_billboards from '../components/vcesium/popViewer/billboard.vue'
import c_layer_ArcGisMap from '../components/vcesium/imageryLayers/ArcGisMapServerImageryProvider.vue'
import c_tile_b3dm from '../components/vcesium/tiles/tileB3dm.vue'
import c_heatmap from '../components/vcesium/tech/heatmap.vue'
import techwall from '../components/vcesium/entity/techwall.vue'
import techlabel from '../components/vcesium/entity/techlabel.vue'
export default {
    name: 'demo',
    components:{
        cesiumContainer
        , cLayer, c_pop_billboards,c_layer_ArcGisMap,tsPanel,svgShape,svgCircle3,approvalCircle,cameras,
        c_tile_b3dm,c_heatmap,techwall,techlabel
    },
    data() {
        return {
            alpha:10,
            billboards:[],
            card1:[
                '预警标题:xxx',
                '预警类型:xxx',
                '发生时间:xxx',
                '预警等级:xxx',
                '推送等级:xxx',
                '具体内容:xxx'
            ],
            tab3:[],
            tab3Config:[],
            tab4:[],
            card4_1:true,
            llhs:[],
            techwalls:[],
            techlabels:[]
        }
    },

    mounted () {
        this.init()
        this.billboards=[{
            llh:{lon:110,lat:34,hei:1},
            image:'img/billboard.png',
            scale:0.2,
            pop:{nam:'popview',inf:{}}
        },{
            llh:{lon:110.1,lat:34,hei:1},
            image:'img/billboard.png',
            scale:0.2,
            pop:{nam:'popview',inf:{}}
        }]
        this.techwalls.push({ positions: smallploy3,color: Cesium.Color.RED,height:50});
        this.techwalls.push({positions: bigploy3,color: Cesium.Color.ORCHID,height:50});
        this.techlabels.push({llh:[118.118,27.295,0],txt:'应急池',img:'/img/billboard.png'});
          
    },
    methods:{
        init(){
            let t=this
            let cen={x:118.11866526713582, y:27.295978058988748}
            setInterval(()=>{
                let pnts=[]
                for(let i=0;i<1000;i++){
                    pnts.push({
                        lon:cen.x+(Math.random()-0.5)*0.02,
                        lat:cen.y+(Math.random()-0.5)*0.02
                    })
                }
                t.llhs=[...pnts]
            },1000)
        },
    }
}
</script>

<style scoped>
.title{
    height: 30px;
    line-height: 30px;
    font-size: 36px;
    font-weight: bold;
    color: white;
    position:absolute;
    width: 100%;
    top: 20px;
    text-align: center;
}
.demo{
  width: 100%;
  height: 100%;
}
.card1_row{
    height: 32px;
    line-height: 30px;
    font-size: 22px;
    text-align: left;
    margin-left: 20px;
}
.card2_panel{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.card3_panel{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.card5_panel{
    overflow: hidden;
}
.right{
    width: 200px;
    position:absolute;
    top: 30px;
    right: 20px;
}
</style>
